<template>
	<view class="container" :style="{ paddingBottom: `${safeAreaInsets?.bottom}px` }">
		<!--  #ifdef  MP-WEIXIN -->
		<custom :back="true" title="充值记录"></custom>
		<!--  #endif -->

		<view class="item" v-for="item in list" :key="item.id">
			<view class="desc">{{ item.name }}</view>
			<view class="time">{{ dayjs.unix(item.pay_time || 0).format('YYYY-MM-DD HH:mm') }}</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import { onShow, onReachBottom } from '@dcloudio/uni-app'
	import { storeToRefs } from 'pinia'
	import { useSystemStore } from '@/stores/system'
	import dayjs from 'dayjs'
	import { getOrderList } from '@/api/index'
	import { OrderItem } from '@/types/index'

	const systemStore = useSystemStore()
	const { safeAreaInsets } = storeToRefs(systemStore)

	const pageInfo = reactive({
		page: 1,
		limit: 20,
		totalPage: 0
	})
	const list = ref<OrderItem[]>([])

	const _getOrderList = async () => {
		try {
			const res = await getOrderList({
				page: pageInfo.page,
				limit: pageInfo.limit
			})
			list.value = list.value.concat(res.data)
			pageInfo.totalPage = res.total_page
		} catch (e) {
			//TODO handle the exception
		}
	}

	onShow(() => {
		_getOrderList()
	})

	onReachBottom(() => {
		if (pageInfo.page >= pageInfo.totalPage) return
		pageInfo.page++
		_getOrderList()
	})
</script>

<style scoped lang="scss">
	.container {
		background: #fff;

		.item {
			position: relative;
			padding: 30rpx;
			@include flex(space-between, center);
			@include line(bottom, $color: #F5F5F5);

			.desc {
				@include tx(28rpx);
				color: #333;
			}

			.time {
				@include tx(24rpx);
				color: #666;
			}
		}
	}
</style>